@charset "utf-8";

/* headbox */
.headbox{height: 140px;background: #fff;margin-bottom: 60px;}
.headbox .page_main_box{height: 100%;}
.headbox .logo{height: 100%;float: left;position: relative;z-index: 1;}
.headbox .logo a{display: block;height: 100%;position: relative;padding: 40px 0 35px 90px;}
.headbox .logo p{height: 100%;max-height: 70px;position: absolute;left: 0;top: 50%;margin-top: -35px;}
.headbox .logo p img{height: 100%;}
.headbox .logo strong{font-size: 30px;color: #006ebe;display: block;line-height: 64px;letter-spacing: -.7px;}
.headbox .logo em{float: left;font-size: 30px;font-weight: 600;line-height: 40px;color: #006ebe;font-style: normal;display: none;padding: 5px 10px;}

.headbox .telbox{height: 100%;float: right;padding: 40px 85px 40px 75px;position: relative;z-index: 2;}
.headbox .telbox em{width: 40px;height: 40px;border-radius: 20px;background: #0070bf url(../images/icon1.png) center no-repeat;position: absolute;left: 20px;top: 50%;margin-top: -20px;}
.headbox .telbox p{font-size: 30px;line-height: 1;color: #006ebe;font-weight: 600;letter-spacing: -1px;}
.headbox .telbox img{width: 80px;position: absolute;right: -5px;top: 50%;margin-top: -40px;}

.headbox .search{width: 70px;height: 40px;float: right;position: relative;top: 50%;margin-top: -20px;z-index: 10;}
.headbox .search *{height: 100%;}
.headbox .search form{width: 100%;position: relative;}
.headbox .search p{width: 360px;box-shadow: 0 0 15px rgba(128,128,128,.1);border: 1px solid #0070bf;border-radius: 20px;overflow: hidden;position: absolute;right: 0;top: 0;z-index: 1;}
.headbox .search p input{display: block;width: 100%;padding: 9px 19px;background: #fff;}
.headbox .search em{display: block;width: 100%;background: #0070bf;border-radius: 20px;position: relative;z-index: 2;}
.headbox .search em input{display: block;width: 100%;background: url(../images/icon2.png) center no-repeat;cursor: pointer;}
.headbox .search span{position: absolute;width: 100%;right: 0;top: 0;z-index: 3;}

.headbox .search:hover span{width: 0;}

@media only screen and (max-width:1440px){
.headbox .logo a{padding-left: 85px;}
.headbox .logo strong{font-size: 28px;}
.headbox .telbox{padding: 40px 80px 40px 65px;}
.headbox .telbox em{left: 15px;}
}
@media only screen and (max-width:1200px){
.headbox{height: 120px;margin-bottom: 50px;}
.headbox .logo a{padding: 30px 0 25px 85px;}
.headbox .telbox{padding: 30px 80px 30px 65px;}
.headbox .search{width: 40px;}
.headbox .search p{width: 100%;opacity: 0;}
.headbox .search:hover{width: 70px;}
.headbox .search:hover p{width: 360px;opacity: 1;}
}
@media only screen and (max-width:1024px){
.headbox{height: 60px;box-shadow: 0 5px 15px rgba(0,0,0,.1);position: fixed;left: 0;top: 0;z-index: 999999;}
.headbox .page_main_box{width: 100%;}
.headbox .logo{padding-left: 15px;}
.headbox .logo a{padding: 5px 0;}
.headbox .logo p{position: relative;top: 0;margin: 0;float: left;}
.headbox .logo em{display: block;}
.headbox .logo strong,
.headbox .logo span,
.headbox .telbox{display: none;}
.headbox .search{right: 65px;margin-top: -18px;width: 36px;height: 36px;}
.headbox .search p input{padding: 7px 17px;}
.headbox .search em{background: #0070bf;}
.headbox .search em input{background-size: 24px;}
}
@media only screen and (max-width:768px){
.headbox{height: 50px;}
.headbox .logo{padding-left: 10px;}
.headbox .logo a{padding: 2px 0 3px;}
.headbox .logo em{font-size: 28px;padding: 4px 5px 0;}
.headbox .search{right: 55px;margin-top: -15px;width: 30px;height: 30px;}
.headbox .search p input{padding: 4px 14px;}
.headbox .search:hover{width: 60px;}
.headbox .search:hover p{width: 320px;}
}
@media only screen and (max-width:480px){
.headbox .search{right: 50px;}
.headbox .logo em{font-size: 26px;}
.headbox .search:hover{right: 5px;}
.headbox .search:hover p{width: 310px;}
}

/* navbox */
.navbox{position: absolute;left: 0;top: 140px;z-index: 99999;}
.navbox.nav_fixed{top: 0;}
.navbox ul li a{display: block;width: 100%;line-height: 30px;padding: 0 5px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

@media only screen and (min-width:1025px){
.navbox{height: 50px;background: #0070bf;top: 120px;}
.navbox ul{height: 100%;display: -webkit-box;display: -moz-box;display: -webkit-flex;display: flex;flex-wrap: nowrap;}
.navbox ul li{width: 14.285%;height: 100%;float: left;flex-shrink: 0;text-align: center;padding: 10px 0;margin-right: -1px;position: relative;z-index: 1;}
.navbox ul li > a{color: #fff;font-size: 15px;position: relative;border-left: 1px solid rgba(57,158,230,.5);}
.navbox ul li:first-child > a{border: none;}

.navbox ul li dl{width: 150px;position: absolute;left: 50%;margin-left: -75px;top: 150%;margin-top: 20px;box-shadow: 0 2px 10px rgba(0,0,0,.2);opacity: 0;z-index: 1;background: rgba(0,0,0,.75);border-radius: 5px;padding: 0;}
.navbox ul li[t*='product'] dl{width: 160px;margin-left: -80px;}
.navbox ul li dl em{display: block;position: absolute;width: 100%;height: 0;left: 0;bottom: 100%;color: #399ee6;overflow: hidden;}
.navbox ul li dl em svg{height: 18px;font-size: 16px;}
.navbox ul li dl a{height: 0;color: #fff;margin: -5px 0;}
.navbox ul li dl a:hover{background: #399ee6;font-weight: 600;}

.navbox ul li.active{background-color: #399ee6;z-index: 5;}
.navbox ul li.active > a{font-weight: 600;}
.navbox ul li:hover dl{opacity: 1;top: 100%;padding: 15px 0;}
.navbox ul li:hover dl em{height: 20px;padding-top: 2px;}
.navbox ul li:hover dl a{padding: 5px;height: 40px;}
}
@media only screen and (min-width:1201px){
.navbox{height: 60px;top: 140px;}
.navbox ul li{padding: 15px 0;}
.navbox ul li > a{font-size: 16px;}
.navbox ul li dl{width: 180px;margin-left: -90px;}
.navbox ul li[t*='product'] dl{width: 190px;margin-left: -95px;}
.navbox ul li dl a{font-size: 15px;}
.navbox ul li:hover dl a{padding: 7px 5px;height: 44px;}
}
@media only screen and (max-width:1024px){
.navbox{width: 100%;height: 0;overflow: hidden;position:fixed;left: 0;top:0;background:#292d33;z-index: 0;z-index: 99999;}
.navbox.nav_on{height:100%;}
.navbox ul{width:100%;height:calc(100vh - 130px);overflow-y:auto;position:absolute;left:0;top:70px;padding:0 2%;flex-wrap: wrap;}
.navbox ul li{width:100%;border-bottom:1px solid rgba(255,255,255,.2);padding: 0;position: relative;z-index: 5;-webkit-transition: .5s;transition: .5s;}
.navbox ul li > a{line-height: 50px;padding: 0 10px;font-size: 15px;color: #fff;}
.navbox ul li.active,
.navbox ul li:hover{z-index: 6;}
.navbox ul li.active > a{color: #24a7f2;font-weight: 600;}
.navbox ul li dl{width: 100%;position: absolute;left: 0;top: 100%;background: #006ebe;}
.navbox ul li dl span{display: block;width: 50px;height: 50px;position: absolute;top: -50px;right: 0;text-align: center;line-height: 50px;color: rgba(255,255,255,.5);font-size: 16px;z-index: 0;}
.navbox ul li dl span svg{height: 50px;line-height: 50px;}
.navbox ul li dl a{line-height: 40px;height: 0;background: #1d7cbf;padding: 0 15px;color: #fff;}
.navbox ul li dl a:hover{background: #f24949;}
.navbox ul li.dl_show dl a{height: 40px;margin-bottom: 1px;}
.navbox ul li.dl_show dl span{-webkit-transform: rotateZ(-180deg);-moz-transform: rotateZ(-180deg);transform: rotateZ(-180deg);color: #fff;}
.navbox ul li[t*='contact'] dl{display: none;}
}
@media only screen and (max-width:768px){
.navbox ul{height:calc(100vh - 120px);top:60px;}
}

/*banner*/
.banner{width: 100%;position: relative;overflow: hidden;}
#bannerpic{width: 100%;height: 0;padding-bottom: 720px;position: relative;z-index: 1;}
#bannerpic ul{width: 100%;height: 100%;position: absolute;display: flex;flex-wrap: nowrap;}
#bannerpic ul li{width:100%;height: 100%;float: left;flex-shrink: 0;position: relative;overflow: hidden;}
#bannerpic ul li em{width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: -1;}
#bannerpic ul li em img{height: 134%;position: absolute;top: -17%;right: 0;}
#bannerpic ul li p{width: 90%;max-width: 1440px;margin: 0 auto;position: relative;top: 45%;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);transform: translateY(-50%);z-index: 5;color: #2d2d2d;}
#bannerpic ul li p > *{display: block;position: relative;}
#bannerpic ul li p strong{line-height: 1;font-size: 60px;padding: 20px 0;}
#bannerpic ul li p i{width: 150px;height: 1px;background: rgba(0,0,0,.35);}
#bannerpic ul li p span{line-height: 1.5;font-size: 24px;height: 171px;padding: 20px 0;}
#bannerpic ul li p a{width: 180px;line-height: 25px;font-size: 15px;color: #fff;padding: 10px;background: #006ebe;font-family: Arial;text-transform: uppercase;text-align: center;border-radius: 3px;position: absolute;left: 0;bottom: 0;}
#bannerpic ul li.active p a:hover{background: #e53939;}

#bannerpic .btn{width: 100%;text-align: center;position: absolute;bottom: 10px;height: 20px;z-index: 3;}
#bannerpic .btn span{width: 20px;height: 100%;display:inline-block;margin: 0 8px;background: #aaa;border: 3px solid #fff;border-radius: 10px;cursor:pointer;box-shadow: 0 2px 5px rgba(128,128,128,.2);position: relative;overflow: hidden;opacity: .75;}
#bannerpic .btn span img{display: none;}
#bannerpic .btn span.on{opacity: 1;}

@media only screen and (min-width:769px){
#bannerpic{padding-bottom: 50%;}
#bannerpic ul li em img{right: -14%;height: 130%;top: -15%;}
#bannerpic ul li p{width: 72%;left: 4%;margin: 0;}

#bannerpic ul li p > *{left: 50%;opacity: 0;}
#bannerpic ul li p strong{font-size: 36px;padding: 15px 0;-webkit-transition: all 1s .7s ease;-moz-transition: all 1s .7s ease;transition: all 1s .7s ease;}
#bannerpic ul li p i{width: 120px;-webkit-transition: all 1s .6s ease;-moz-transition: all 1s .6s ease;transition: all 1s .6s ease;}
#bannerpic ul li p span{font-size: 19px;height: 141px;padding: 15px 0;-webkit-transition: all 1s .5s ease;-moz-transition: all 1s .5s ease;transition: all 1s .5s ease;}
#bannerpic ul li p a{width: 150px;line-height: 24px;padding: 8px;bottom: -50px;-webkit-transition: all 1s 1.5s ease, background .5s ease;-moz-transition: all 1s 1.5s ease, background .5s ease;transition: all 1s 1.5s ease, background .5s ease;}

#bannerpic ul li.active p strong,
#bannerpic ul li.active p i,
#bannerpic ul li.active p span,
#bannerpic ul li.active p a{left: 0;opacity: 1;bottom: 0;}

#bannerpic .btn{width: 100%;text-align: center;position: absolute;bottom: 10px;height: 30px;z-index: 3;padding-top: 5px;}
#bannerpic .btn span{width: auto;background: #fff;border-width: 2px;border-radius: 0;margin: 0 5px;opacity: 1;border-radius: 2px;}
#bannerpic .btn span::after{content: "";width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
#bannerpic .btn span img{display: block;height: 130%;position: relative;left: 50%;top: -15%;-webkit-transform: translateX(-50%);transform: translateX(-50%);}
#bannerpic .btn span.on{margin-top: -5px;height: 30px;}
}
@media only screen and (min-width:1025px){
#bannerpic ul li p strong{font-size: 48px;padding: 20px 0;}
#bannerpic ul li p span{font-size: 24px;padding: 20px 0;height: 171px;}
#bannerpic ul li p a{width: 180px;line-height: 25px;padding: 10px;}
}
@media only screen and (min-width:1201px){
#bannerpic{padding-bottom: 45%;}
#bannerpic ul li em img{right: -12%;}
#bannerpic ul li p strong{font-size: 56px;}
#bannerpic ul li p span{font-size: 24px;padding: 18px 0;}
#bannerpic ul li p a{width: 180px;line-height: 25px;padding: 10px;}
#bannerpic .btn{height:35px}
#bannerpic .btn span{border-width: 3px;}
#bannerpic .btn span.on{height: 35px;}
}
@media only screen and (min-width:1441px){
#bannerpic{padding-bottom: 720px;}
#bannerpic ul li em img{right: -10%;height: 137%;top: -17%;}
#bannerpic ul li p strong{font-size: 60px;}
}
@media only screen and (min-width:1601px){
#bannerpic ul li em img{right: -5%;}
}
@media only screen and (min-width:1701px){
#bannerpic ul li em img{right: 0;}
}

@media only screen and (max-width:768px){
#bannerpic{padding-bottom: 60%;}
#bannerpic ul li em img{right: -10%;}
#bannerpic ul li p{text-align: center;background: rgba(0,0,0,.35);padding: 30px 45px 50px;color: #fff;top: 48%;}
#bannerpic ul li p::after{content: "";width: calc(100% - 40px);height: calc(100% - 50px);border: 1px solid rgba(255,255,255,.75);position: absolute;left: 20px;top: 20px;z-index: -1;}
#bannerpic ul li p strong{font-size: 30px;}
#bannerpic ul li p i{width: 100px;margin: 0 auto;background-color: rgba(255,255,255,.75);}
#bannerpic ul li p span{font-size: 18px;height: auto;padding: 20px 0 25px;line-height: 30px;min-height: 85px;}
#bannerpic ul li p a{width: 150px;line-height: 24px;padding: 8px;left: 50%;margin-left: -75px;bottom: 10px;}
#bannerpic .btn{bottom: 10px;height: 16px;}
#bannerpic .btn span{width: 16px;border-width: 2px;}
#bannerpic .btn span.on{background: #e53939;}
}
@media only screen and (max-width:600px){
#bannerpic ul li p{padding: 20px 25px 40px;}
#bannerpic ul li p::after{width: calc(100% - 20px);height: calc(100% - 32px);left: 10px;top: 10px;}
#bannerpic ul li p strong{font-size: 24px;padding: 15px;}
#bannerpic ul li p i{width: 80px;}
#bannerpic ul li p span{font-size: 16px;padding: 15px 0 22px;line-height: 24px;}
#bannerpic ul li p a{width: 130px;line-height: 20px;margin-left: -65px;font-size: 14px;bottom: 5px;}
}
@media only screen and (max-width:480px){
#bannerpic{padding-bottom: 75%;}
#bannerpic ul li em img{right: -17%;height: 120%;top: -10%;}
#bannerpic .btn span{margin: 0 6px;}
}
@media only screen and (max-width:425px){
#bannerpic{padding-bottom: 85%;}
#bannerpic ul li em img{right: -25%;}
#bannerpic ul li p{padding: 16px 20px 40px;top: 47%;}
#bannerpic ul li p strong{font-size: 20px;}
#bannerpic ul li p span{padding: 12px 0;}
}

.bannerpic ul li.active em{-webkit-animation: Zoom 3s ease-out;-moz-animation: Zoom 3s ease-out;-ms-animation: Zoom 3s ease-out;-o-animation: Zoom 3s ease;animation: Zoom 3s ease-out;}
@-webkit-keyframes Zoom{
    0%{-webkit-transform: scale(1.2,1.2);opacity: 0;}
    15%{-webkit-transform: scale(1.2,1.2);}
    100%{-webkit-transform: scale(1,1);opacity: 1;}
}
@-moz-keyframes Zoom{
    0%{-moz-transform: scale(1.2,1.2);opacity: 0;}
    15%{-moz-transform: scale(1.2,1.2);}
    100%{-moz-transform: scale(1,1);opacity: 1;}
}
@-ms-keyframes Zoom{
    0%{-ms-transform: scale(1.2,1.2);opacity: 0;}
    15%{-ms-transform: scale(1.2,1.2);}
    100%{-ms-transform: scale(1,1);opacity: 1;}
}
@-o-keyframes Zoom{
    0%{-o-transform: scale(1.2,1.2);opacity: 0;}
    15%{-o-transform: scale(1.2,1.2);}
    100%{-o-transform: scale(1,1);opacity: 1;}
}
@keyframes Zoom{
    0%{transform: scale(1.2,1.2);opacity: 0;}
    15%{transform: scale(1.2,1.2);}
    100%{transform: scale(1,1);opacity: 1;}
}


/* foot */
.footbox{color: rgba(255,255,255,.75);line-height: 30px;background:#0a4e87 url(../images/bg4.jpg) center bottom no-repeat;background-attachment: fixed;}
.footbox a{color: rgba(255,255,255,.75);}
.footbox a:hover{color: #fff;}

.footbox .txt_con{padding: 70px 0;}
.footbox .txt_con .titl{width: 100%;padding-bottom: 20px;color: #fff;font-size: 15px;font-weight: 600;line-height: 20px;}
.footbox .txt_con .list a{display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

.footbox .txt_con .txt{width: 14%;float: left;flex-shrink: 0;padding: 0 2% 0 4%;border-left: 1px solid rgba(255,255,255,.2);}
.footbox .txt_con .txt.txt1{width: 10%;padding-left: 0;border: none;}
.footbox .txt_con .txt.txt2{width: 20%;}
.footbox .txt_con .txt.txt5{width: 18%;}

.footbox .txt_con .ewm{width: 24%;padding: 0;border: none;}
.footbox .txt_con .ewm .con{max-width: 300px;float: right;}
.footbox .txt_con .ewm .con .cont{margin: 0 -5px;margin-top: 10px;}
.footbox .txt_con .ewm .con .cont p{width: 50%;padding: 0 5px;float: left;text-align: center;}
.footbox .txt_con .ewm .con .cont p em{display: block;padding: 8% 8% 10%;border: 1px solid rgba(255,255,255,.2);}
.footbox .txt_con .ewm .con .cont p em img{width: 100%;}
.footbox .txt_con .ewm .con .cont p span{display: block;color: #fff;background:#0a4e87 url(../images/bg4.jpg) center bottom no-repeat;background-attachment: fixed;width: 5em;margin: -15px auto 0;}

.footbox .bottom{width: 100%;padding: 35px 0;line-height: 25px;border-top: 1px solid rgba(255,255,255,.2);text-align: center;margin-top: 15px;}
.footbox .bottom p{display: inline;padding: 0 3px;}

@media only screen and (max-width:1440px){
.footbox .txt_con{padding: 60px .5%;}
.footbox .bottom{padding: 30px 0;margin-top: 10px;}
}
@media only screen and (max-width:1200px){
.footbox .txt_con{padding: 50px .5%;}
.footbox .txt_con .titl{padding-bottom: 15px;}
.footbox .txt_con .txt{width: 13%;padding-left: 3%;}
.footbox .txt_con .txt.txt2{width: 21%;}
.footbox .txt_con .txt.txt5{width: 17%;}
.footbox .txt_con .ewm{width: 26%;}
.footbox .bottom{padding: 25px 0;margin-top: 5px;}
}
@media only screen and (max-width:1024px){
.footbox{background-size: 100% auto;background-attachment: unset;}
.footbox .txt_con{display: none;}
.footbox .bottom{margin: 0;border: none;}
}
@media only screen and (max-width:768px){
.footbox .bottom .txt{display: inline;}
}
@media only screen and (max-width:480px){
.footbox .bottom{padding: 20px 0;}
.footbox .bottom .txt2 p{display: none;}
.footbox .bottom .txt2 .p_tech{display: inline;}
}